<template>
  <base-modal
    :show.sync="show"
    :title="$t('event.setting.serviceEventTypeSetting.flow.component.editRulesDialog.title1')"
    width="420px"
    class="userules-dialog"
    @closed="onClose"
  >
    <div class="base-modal-content">
      <div class="base-form-list">
        <label>{{$t('event.setting.serviceEventTypeSetting.flow.component.editRulesDialog.label1')}}
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('event.setting.serviceEventTypeSetting.flow.component.editRulesDialog.tips1')"
            placement="top"
          >
            <span><i class="el-icon-question"></i></span>
          </el-tooltip>
        </label>
        <el-select v-model="stateCanEdit" @change="onChangeState" multiple :placeholder="$t('common.placeholder.select')">
          <el-option
            v-for="item in flowState"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="base-form-list">
        <label>{{$t('event.setting.serviceEventTypeSetting.flow.component.editRulesDialog.label2')}}
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">
              <template>
                <div class="form-displaymode-setting-item"><span>●</span> {{$t('event.setting.serviceEventTypeSetting.flow.component.editRulesDialog.des1')}}</div>
                <div class="form-displaymode-setting-item"><span>●</span> {{$t('event.setting.serviceEventTypeSetting.flow.component.editRulesDialog.des2')}}</div>
              </template>
            </div>
            <span><i class="el-icon-question"></i></span>
          </el-tooltip>
        </label>
        <el-select v-model="flow"  multiple clearable :placeholder="$t('event.setting.serviceEventTypeSetting.flow.component.editRulesDialog.pla1')">
          <el-option
            v-for="item in flowRules.filter(item => item.show)"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="onSubmit">{{$t('common.base.confirm')}}</el-button>
    </div>
  </base-modal>
</template>
<script>
import { flowState, flowRules, getFlowRuleOptions } from './useRules';

export default {
  name: 'use-rules-dialog',
  props: {
    eventCard: {
      type: Object,
      default: () => ({}),
    },
    visiable: {
      type: Boolean,
    },
  },
  data() {
    return {
      show: false,
      flowRules,
      flowState,
      flow: [],
      stateCanEdit: [],
    };
  },
  methods: {
    /* 监听选择事件状态 */
    onChangeState(value) {
      this.flowRules = getFlowRuleOptions(value);
      this.flow = [];
    },
    /* 关闭 */
    onClose() {
      this.$emit('update:visiable', false);
    },
    /* 保存 */
    onSubmit() {
      this.$set(this.eventCard, 'stateCanEdit', this.stateCanEdit);
      this.$set(this.eventCard, 'notNullFlow', this.flow);
      this.onClose();
    },
  },
  watch: {
    visiable(newValue) {
      this.show = newValue;

      if (newValue) {
        let { notNullFlow, stateCanEdit } = this.eventCard;
        this.flow = notNullFlow || [];
        this.stateCanEdit = stateCanEdit || [];
        this.flowRules = getFlowRuleOptions(this.stateCanEdit);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.userules-dialog {
  ::v-deep  .base-modal-body {
    padding: 20px;

    .base-form-list {
      margin-bottom: 20px;

      label {
        color: $text-color-regular;
        margin-bottom: 4px;
        .el-tooltip {
          color: #999;
        }
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
